<template>
	<view class="login_page">
		<view class="header">
			<image src="https://static.tianwandailian.cn/static/server/newimage/back_icon.png" mode="" class="back-img"
				@click="goBack"></image>
			<view class="title-box">
				<view class="title">换绑手机</view>
			</view>

		</view>
		<view class="main">
			<view class="login-box">
				<view class="form">
					<uv-form labelPosition="top" :model="form" ref="formRef">
						<view v-if="steps === 0">
							<uv-form-item prop="phone">
								<view class="ipt-box">
									<uv-input placeholder="请输入身份证号" placeholder-class="placeholderStyle" border="none"
										v-model="form.cardNo" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="text" placeholder="请输入姓名" placeholder-class="placeholderStyle" border="none"
										maxlength="11" v-model="form.userName" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="下一步" :disabled="!form.cardNo" @click="submit(1)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:60rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
						<view v-else>
							<uv-form-item prop="phone">
								<view class="ipt-box">
									<uv-input type="number" placeholder="请输入新手机号" placeholder-class="placeholderStyle" border="none"
										v-model="form.newPhone" clearable maxlength="11"></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" :adjust-position="false" placeholder="请输入验证码"
										placeholder-class="placeholderStyle" border="none" v-model="form.newCode" :maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode(2)" style="color: #6E68E9;font-size: 28rpx;">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="确认" @click="submit(2)" customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:60rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
					</uv-form>
				</view>
			</view>
		</view>
		<uv-modal ref="modalRef" title="手机号换绑成功" align="center" content='手机号换绑成功,请前往登录.' confirmText="确定"
			confirmColor="#6E68E9" @confirm="toLogin"></uv-modal>
	</view>

</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		checkStr
	} from '@/utils';
	import {
		SendSmsCode
	} from '@/api/modules/system';
	import {
		PostCheckCardNo,
		PostCheckNewPhone
	} from '@/api/modules/mine';

	const form = reactive({
		newPhone: "",
		newCode: "",
		userName: "",
		cardNo: ''
	})


	const codeTips = ref("")
	const steps = ref(0)
	const modalRef = ref()
	//	倒计时
	function codeChange(text) {
		codeTips.value = text;
	}
	// 	获取验证码
	const uCodeRef = ref()

	function getCode(type) {

		if (uCodeRef.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			SendSmsCode({
				phone: form.newPhone,
				isRegister: 0
			}).then(res => {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				uCodeRef.value.start();
			})
		}
	}
	const IuserId = ref()

	function submit(type) {
		if (type === 1) {
			PostCheckCardNo({
				cardNo: form.cardNo,
				userName: form.userName
			}).then(res => {
				steps.value = type
				IuserId.value = res.data.id
			})
		} else {
			if (!form.newPhone || !checkStr(form.newPhone, 'mobile')) {
				uni.$uv.toast('请输入正确的手机号');
				return
			}
			if (!form.newCode || form.newCode.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}
			PostCheckNewPhone({
				newPhone: form.newPhone,
				smsCode: form.newCode,
				userId: IuserId.value
			}).then(res => {
				modalRef.value.open()
				localStorage.setItem('__DEFAULT_LOGIN_PHONE', '')
			})
		}

	}

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}

	function goBack() {
		uni.navigateBack()
	}
</script>
<script>

</script>
<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-size: contain;
		background-image: url('https://static.tianwandailian.cn/static/server/newimage/order_bg.png');
		background-repeat: no-repeat;
		position: relative;

		.header {
			height: 352rpx;
			width: 100%;
			position: relative;

			.back-img {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 95rpx;
				left: 32rpx;
			}

			.title-box {
				margin: 206rpx 76rpx 0;


				.title {
					color: #222;
					font-size: 64rpx;
					font-weight: 600;
				}


			}

		}

		.main {
			width: calc(100vw - 152rpx);
			padding: 0 76rpx;
			flex: 1;
			display: flex;

			.login-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.oauth {
					text-align: center;
					margin-top: 242rpx;

					.number {
						font-size: 60rpx;
						font-weight: 700;
						color: #222
					}

					.tip {
						margin-top: 30rpx;
						font-size: 28rpx;
						color: #888
					}

					.btn-box {
						margin-top: 120rpx;
					}
				}

				.form {
					margin-top: 60rpx;

					.uv-form {
						width: 100%;

						.ipt-box {
							background: #fff;
							height: 88rpx;
							border-radius: 16rpx;
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							padding: 0 30rpx;
						}
					}
				}

				.other-box {
					width: 100%;
					margin-bottom: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #222;

					.select {
						height: 35rpx;
						width: 35rpx;
						border: 1rpx solid #2979ff;
						background: #2979ff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.unselect {
						border: 1rpx solid #888;
						background: #fff;
					}
				}
			}
		}

		.placeholderStyle {
			color: #CCCCCC;
			font-size: 28rpx;
		}
	}
</style>